<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Drawing</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Android, programming, introduction, tutorial, 
Java, mobile development">
<meta name="description" content="In this chapter of the Android tutorial, we will
do some drawing.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Drawing</h1>


<p>
In this chapter of the Android development tutorial we will do some
drawing. The Android framework API provides 2D drawing API that
allows to render custom graphics. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
We can either draw directly on a Canvas object or to modify
existing Views to customize their look and feel. Drawing
is performed in the <code>onDraw()</code> method. Simple graphics
can be created in the layout XML file too.
</p>

<p>
We use the <i>Canvas</i> object to perform drawing. Canvas is 
an object that has drawing methods to do the drawing. Actual drawing
happens in a <i>Bitmap</i> that is placed into a window. 
The <i>Paint</i> class holds the style and colour information about 
how to draw geometries, text and bitmaps. 
A <i>Drawable</i> is an object that can be drawn. Unlike a View, a Drawable 
does not have any facility to receive events or otherwise interact with the user.
</p>


<h2>Oval shape</h2>
 
<p>
We are going to draw a circle on a View. The circle is defined in
an XML file. The manifest file does not need to be modified.
</p>

<div class="codehead">oval.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"&gt;
    
   &lt;solid 
       android:color="#666666"/&gt;
   &lt;size 
       android:width="70dp"
       android:height="70dp"/&gt;
&lt;/shape&gt; 
</pre>

<p>
In the <i>oval.xml</i> file we create a circle shape. We define its colour and size.
The oval.xml file is located in the res/drawable directory. The directory had to 
be created.
</p>

<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;        

&lt;View
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="5dp"
    android:background="@drawable/oval"
    /&gt;   
   
&lt;/LinearLayout&gt;
</pre>


<p>
In the <i>main.xml</i> file, we define a simple View. The background
of this view is filled with our drawable object.
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;OvalShape&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
Resources file.
</p>

<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.ovalshape;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}
</pre>

<p>
The file just loads the defined layout.
</p>

<img src="/img/java/android/ovalshape.png" alt="Oval Shape">
<div class="figure">Figure: Oval Shape</div>


<h2>Drawing a rectangle</h2>
 
<p>
In the second example, we will draw a rectangle on a View.
It will be drawn in the <code>onDraw()</code> method of the
View. Since we will be drawing on an existing View, we will
have a predefined Canvas with its Bitmap. We do not need to
worry about them. The manifest file is not modified. In this 
example the main.xml file will not be needed.
</p>


<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;DrawRect&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
Resources.
</p>

<div class="codehead">DrawView.java</div>
<pre class="code">
package com.zetcode.drawrect;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class DrawView extends View 
{
    Paint paint = new Paint();

    public DrawView(Context context)  
    {
        super(context);
        paint.setColor(Color.GREEN);
    }

    @Override
    public void onDraw(Canvas canvas) 
    {
        canvas.drawRect(30, 30, 100, 100, paint);
    }
}
</pre>

<p>
We have a custom DrawView class. The file is located in
the src/com/zetcode/drawrect/ directory.
</p>

<pre class="explanation">
public class DrawView extends View 
</pre>

<p>
The custom DrawView class inherits from the base View class. 
</p>

<pre class="explanation">
Paint paint = new Paint();
</pre>

<p>
An instance of the Paint class is created. It will define a colour
for drawing.
</p>

<pre class="explanation">
paint.setColor(Color.GREEN);
</pre>

<p>
We will paint in green colour.
</p>

<pre class="explanation">
@Override
public void onDraw(Canvas canvas) 
{
    canvas.drawRect(30, 30, 100, 100, paint);
}
</pre>

<p>
The drawing is performed in the <code>onDraw()</code> method. The method provides
the <code>Canvas</code> object for us. We call the <code>drawRect()</code> to 
draw the rectangle on the View. 
</p>

<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.drawrect;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends Activity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        DrawView drawView = new DrawView(this);
        drawView.setBackgroundColor(Color.WHITE);
        setContentView(drawView);
    }
}
</pre>

<p>
In the MainActivity.java source file we set the custom DrawView
to be the content View of the Activity.
</p>

<pre class="explanation">
DrawView drawView = new DrawView(this);
</pre>

<p>
We create an instance of the <code>DrawView</code> class.
</p>

<pre class="explanation">
drawView.setBackgroundColor(Color.WHITE);
</pre>

<p>
We specify the background colour for the View.
</p>

<pre class="explanation">
setContentView(drawView);
</pre>

<p>
The DrawView becomes the content View of the Activity.
</p>


<img src="/img/java/android/drawrect.png" alt="Rectangle">
<div class="figure">
Figure: Rectangle
</div>


<p>
In this chapter of the Android development tutorial, we did dome basic drawing.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br> 



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified October 29, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

